<!--
	评估子区一破坏面积数据统计
	Created by Penglei on 2023/08/08
-->
<template>
	<div id="damagedAreaChartsRef" ref="damagedAreaChartsRef" class="echats-box"></div>
</template>

<script setup name="DamagedArea">
import { onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';

let myChart = null;
// 渲染图表
const renderChart = (data = []) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('damagedAreaChartsRef'));
	}
	// 数据
	const xAxisData = ['I类', 'II类', 'III类', 'IV类', 'V类', 'VI类', 'VII类'];
	const yAxisData = ['基本完好', '轻微破坏', '中等破坏', '严重破坏', '毁坏'];
	data = [
		[0, 0, 25],
		[0, 1, 20],
		[0, 2, 18],
		[0, 3, 15],
		[0, 4, 12],
		[0, 5, 10],
		[0, 6, 5],
		[1, 0, 25],
		[1, 1, 20],
		[1, 2, 18],
		[1, 3, 15],
		[1, 4, 12],
		[1, 5, 10],
		[1, 6, 5],
		[2, 0, 25],
		[2, 1, 20],
		[2, 2, 18],
		[2, 3, 15],
		[2, 4, 12],
		[2, 5, 10],
		[2, 6, 5],
		[3, 0, 25],
		[3, 1, 20],
		[3, 2, 18],
		[3, 3, 15],
		[3, 4, 12],
		[3, 5, 10],
		[3, 6, 5],
		[4, 0, 25],
		[4, 1, 20],
		[4, 2, 18],
		[4, 3, 15],
		[4, 4, 12],
		[4, 5, 10],
		[4, 6, 5],
	];
	// 配置项
	const option = {
		visualMap: {
			max: 20,
			inRange: {
				color: [
					'#EF2E2E',
					'#CD5E15',
					'#5D17D4',
					'#0068FF',
					'#95C923',
				]
			}
		},
		xAxis3D: {
			type: 'category',
			data: xAxisData,
			axisLabel: {
				//y轴文字的配置
				textStyle: {
					color: '#ffffff',
				},
			},
			axisLine: {
				lineStyle: {
					color: '#475ADB',
				}
			},
		},
		yAxis3D: {
			type: 'category',
			data: yAxisData,
			axisLabel: {
				//y轴文字的配置
				textStyle: {
					color: '#ffffff',
				},
			},
			axisLine: {
				lineStyle: {
					color: '#475ADB',
				}
			},
		},
		zAxis3D: {
			type: 'value',
			axisLabel: {
				//y轴文字的配置
				textStyle: {
					color: '#ffffff',
				},
			},
			axisLine: {
				lineStyle: {
					color: '#475ADB',
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#475ADB',
					opacity: 0.3,
				}
			},
		},
		grid3D: {
			boxHeight: 80,
			boxWidth: 150,
			boxDepth: 80,
			viewControl: {
				projection: 'orthographic'
			},
			splitLine: {
				show: false,
			},
			light: {
				main: {
					intensity: 1.2,
					shadow: true
				},
				ambient: {
					intensity: 0.3
				}
			},
		},
		series: [
			{
				type: 'bar3D',
				data: data.map(function (item) {
					return {
						value: [item[1], item[0], item[2]]
					};
				}),
				barSize: 8,
				shading: 'lambert',
				label: {
					fontSize: 16,
					borderWidth: 1
				},
				emphasis: {
					label: {
						fontSize: 20,
						color: '#900'
					},
					itemStyle: {
						color: '#900'
					}
				}
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 挂载完成
onMounted(() => {
	// 渲染图表
	renderChart();
})
</script>

<style lang="scss" scoped>
.echats-box {
	height: 230px;
}
</style>